<template>
  <div class="commentPage">
    <van-nav-bar
      title="评论"
      left-text="返回"
      left-arrow
      @click-left="onClickLeft"
    />
    <div class="commentPageInner">
      <ul class="commentForm">
        <li>
          <div class="shopInfo">
            <img :src="logo" alt="">
            <span>{{ name }}</span>
          </div>
          <van-divider style="margin: 12px 0;" />
          <van-field name="taste" label="口味">
            <template #input>
              <van-rate
                v-model="commentInfo.taste"
                color="#ffd21e"
                void-icon="star"
                void-color="#eee"
              />
            </template>
          </van-field>
          <van-field name="service" label="服务">
            <template #input>
              <van-rate
                v-model="commentInfo.service"
                color="#ffd21e"
                void-icon="star"
                void-color="#eee"
              />
            </template>
          </van-field>
          <van-field name="costEffectiveness" label="性价比">
            <template #input>
              <van-rate
                v-model="commentInfo.costEffectiveness"
                color="#ffd21e"
                void-icon="star"
                void-color="#eee"
              />
            </template>
          </van-field>
          <van-field name="environment" label="环境">
            <template #input>
              <van-rate
                v-model="commentInfo.environment"
                color="#ffd21e"
                void-icon="star"
                void-color="#eee"
              />
            </template>
          </van-field>
        </li>
        <li>
          <van-field
            style="margin-bottom: 12px"
            v-model="commentInfo.evaluateRemark"
            rows="5"
            autosize
            type="textarea"
            maxlength="250"
            placeholder="请输入"
            show-word-limit
          />
          <van-uploader
            multiple
            :max-count="6"
            v-model="commentInfo.picFile"
            capture="camera"
            upload-text="不超过5Mb"
            :after-read="afterRead"
            :max-size="5 * 1024 * 1024"
            @oversize="onOversize"
            :before-delete="onBeforeDelete"
            :accept="accept"
          />
        </li>
      </ul>
      <van-button
        @click="setCommentList"
        :loading="loading"
        loading-text="发布中..."
        color="#ffc600"
        round
        block
        type="primary">
        发布
      </van-button>
    </div>
  </div>
</template>
<script setup>
import { useRoute } from 'vue-router'
import { evaluateAdd  } from "@/api/homePage.js";

const route = useRoute();
const { id, name, logo } = route.query;

//评论
const commentInfo = reactive({
  merchantId: id,
  taste: 1,
  service: 1,
  costEffectiveness: 1,
  environment: 1,
  evaluateRemark: "",
  picFile: []
})

//图片上传
import request from '@/utils/request'
const accept = ref("image/png, image/jpeg, image/jpg");
const afterRead = (files, type) => {
  const newFiles = files instanceof Array ? files : [files]
  const uploadPromise = newFiles.map((item) => {
    const { file } = item;
    const formData = new FormData();
    formData.append('file', file);
    return request({
      url: '/prod-api/common/upload',
      headers: {
        isToken: true,
        'Content-Type': 'multipart/form-data'
      },
      method: 'post',
      data: formData,
    })
  })
  Promise.all(uploadPromise).then((res) => {
    const list = res.map(item => {
      const { id, fileName, oldName, url } = item;
      return { id, name: fileName, url, route: oldName }
    });
    commentInfo['picFile'].push(...list);
    commentInfo['picFile'] = commentInfo['picFile'].filter(item => !!item.id);
  })
};

//限制上传文件大小
import { showToast } from 'vant';
const onOversize = (file) => {
  showToast('文件大小不能超过 5Mb');
};

//删除图片提示
import { showDialog } from 'vant';
const onBeforeDelete = () => {
  return showDialog({
    title: '删除提示',
    message: '确定删除该图片？',
  })
}

import { useRouter } from 'vue-router';
const router = useRouter();
import { showNotify } from 'vant';
const loading = ref(false);
const setCommentList = () => {
  loading.value = true;
  evaluateAdd(commentInfo).then(res => {
    loading.value = false;
    showNotify({ type: 'success', message: '评论成功' });
    router.push({
      name: 'merchantDetailPage',
      query: { id }
    });
  })
}

//返回
const onClickLeft = () => history.back();

</script>
<style lang="less" scoped>
div.commentPage {
  width: 100%;
  height: 100%;
  position: relative;
  div.commentPageInner {
    height: calc(100% - 46px);
    overflow: auto;
    position: relative;
    background: #f7f7f7;
    padding: 12px;
    ul.commentForm{
      margin-bottom: 12px;
      li{
        border-radius: 20px;
        background: #fff;
        padding: 12px;
        box-sizing: border-box;
        &:not(:last-child){
          margin-bottom: 12px;
        }
        .shopInfo {
          height: 28px;
          display: flex;
          align-items: center;
          justify-content: start;
          img {
            width: 28px;
            height: 28px;
            margin-right: 12px;
          }
          span {
            font-size: 16px;
            font-weight: bold;
            color: #000000;
          }
        }
        .van-field {
          padding-left: 0;
          padding-right: 0;
          &:first-child{
            padding-top: 0;
          }
          &:last-child{
            padding-bottom: 0;
          }
        }
      }
    }
  }
}
</style>
